<template>
	<view style="padding-bottom: 130rpx;">

		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">车辆押金付款情况</text>
			</view>
			<view class="contentBox">
				<view class="textItem">
					<text>应付押金</text>
					<text style="color: #333;">{{detailInfo.depositPayable}}元</text>
				</view>
				<view class="textItem">
					<text>已付押金</text>
					<text style="color: #333;">
						{{detailInfo.depositPaidAmount||0}}元
						<text v-if="detailInfo.depositPaidAmount">
							(<text
								v-if="detailInfo.preLicensingAmount>0">预授权{{detailInfo.preLicensingAmount}}元</text>&nbsp;&nbsp;<text
								v-if="detailInfo.otherAmount>0">其他方式{{detailInfo.otherAmount}}元</text>)
						</text>
					</text>
				</view>
				<view class="textItem">
					<text>车损费用</text>
					<text style="color: #333;">{{detailInfo.vehicleDamageExpense||'0元'}}</text>
				</view>
				<view class="textItem">
					<text>押金结余</text>
					<text style="color: #333;">
						{{detailInfo.remainingDeposit||0}}元
						<text v-if="detailInfo.remainingDeposit">
							(<text v-if="detailInfo.preSurplus>0">预授权{{detailInfo.preSurplus}}元</text>&nbsp;&nbsp;
							<text v-if="detailInfo.notPreSurplus>0">其他方式{{detailInfo.notPreSurplus}}元</text>)
						</text>
					</text>
				</view>
			</view>
		</view>

		<view class="boxContrainer" v-if="detailInfo.illUnPaidAmount>0">
			<view class="titlBox">
				<text class="title">剩余押金结算</text>
			</view>
			<view class="contentBox">
				<uni-forms ref="form">
					<uni-forms-item label="结算方式" labelWidth="85" required>
						<view @click="show1 = detailInfo.remainingDeposit>0">
							<u--input v-model="settlementName" placeholder="请选择" disabled disabledColor="#fff"
								suffixIcon="arrow-right"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="转违章金额" labelWidth="85" required v-if="list2.length>0 && settlementCode==1">
						<view @click="show2 = true">
							<u--input v-model="changeAmountName" placeholder="请选择" disabled disabledColor="#fff"
								suffixIcon="arrow-right"></u--input>
						</view>
					</uni-forms-item>

					<view style="color: #FF6600;font-size: 28rpx;" v-if="settlementCode == 2&&detailInfo.preSurplus>0">
						预授权结余{{detailInfo.preSurplus}}元
					</view>
					<view style="color: #FF6600;font-size: 28rpx;"
						v-if="settlementCode == 2&&detailInfo.notPreSurplus>0">
						其他方式结余{{detailInfo.notPreSurplus}}元,将由财务人员进行退款
					</view>
					<view style="color: #FF6600;font-size: 28rpx;" v-if="settlementCode == 1&&changeAmountCode==2">
						其他方式结余{{detailInfo.notPreSurplus}}元,将由财务人员进行退款
					</view>
					<view style="color: #FF6600;font-size: 28rpx;" v-if="settlementCode == 1&&changeAmountCode==3">
						预授权结余{{detailInfo.preSurplus}}元,将由财务人员进行退款
					</view>
				</uni-forms>
			</view>
		</view>

		<button type="info" class="sub-btn" @click="confimSettlement">确认结算</button>


		<!-- 结算方式 -->
		<u-picker :show="show1" :columns="list1" keyName="name" closeOnClickOverlay @close="show1 = false"
			@cancel="show1 = false" title="请选择结算方式" confirmColor="#1573FF" @confirm="confimSettlementType"></u-picker>
		<!-- 转违章金额 -->
		<u-picker :show="show2" :columns="list2" keyName="name" closeOnClickOverlay @close="show2 = false"
			@cancel="show2 = false" title="请选择转违章金额" confirmColor="#1573FF" @confirm="confimChangeAmount"></u-picker>

	</view>
</template>

<script>
	import * as orderApi from '@/api/order-api.js';
	export default {
		data() {
			return {
				show1: false,
				show2: false,
				detailInfo: {},
				settlementCode: 2,
				settlementName: '立即结算',
				list1: [
					[{
							name: '立即结算',
							code: 2
						},
						{
							name: '与违章押金同步结算',
							code: 3
						}
					]
				],
				changeAmountCode: 1,
				changeAmountName: '全部转违章',
				list2: [
					[{
							name: '全部转违章',
							code: 1
						}

					]
				],
				orderNo: '',
			}
		},
		methods: {
			// 获取押金结算信息
			getDepositSettlementDetails() {
				orderApi.depositSettlementDetails(this.orderNo).then(res => {
					this.detailInfo = res.data;
					if (this.detailInfo.illUnPaidAmount > 0) {
						let a = {
							name: '转违章押金',
							code: 1
						}
						this.list1[0].unshift(a);
					}
					if (this.detailInfo.preSurplus > 0 && this.detailInfo.notPreSurplus > 0) {
						let a = {
							name: '仅预授权转违章',
							code: 2
						};
						let b = {
							name: '仅其他支付方式转违章',
							code: 3
						};
						this.list2[0].push(a);
						this.list2[0].push(b);
					}

				})
			},
			//结算方式
			confimSettlementType(e) {
				this.settlementCode = e.value[0].code;
				this.settlementName = e.value[0].name;
				this.show1 = false;
			},
			// 转违章金额
			confimChangeAmount(e) {
				this.changeAmountCode = e.value[0].code;
				this.changeAmountName = e.value[0].name;
				this.show2 = false;
			},
			// 确认结算
			confimSettlement() {
				orderApi.overDepositSettlement({
					orderNo: this.orderNo,
					settlementMethod: this.settlementCode,
					transferMethod: this.changeAmountCode
				}).then(res => {
					uni.$emit('refreshOrder');
					this.$u.toast('押金结算成功');
					uni.navigateBack({
						animationDuration: 300
					});
				})
			}

		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.orderNo = item.orderNo;
			this.getDepositSettlementDetails();

		},
	}
</script>

<style lang="scss" scoped>

</style>
